<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS --><!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">

    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- FONTS
    <link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
</head>
<body>
<header class="navbar clearfix" id="header">
</header>

<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>

            </ul>
            <!-- /SIDEBAR MENU -->
        </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">


        <div class="modal fade" id="box-config" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">补发优惠券</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-md-3" style="line-height:34px;"><span
                                    class="required">*</span>补发原因：</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="remark" placeholder="请输入补发原因"
                                       maxlength="100"/>
                                <input type="hidden" name="id"/>
                            </div>
                        </div>


                        <div class="form-group" >
                            <label class="control-label col-md-3" style="line-height:34px;"><span
                                    class="required">*</span>用户手机号：</label>
                            <div class="col-md-8">
                                <textarea style="margin-bottom:10px" class="form-control" name="username" id="username" placeholder="最多可以输入1000个手机号,多个手机号请使用逗号分隔"
                                    style="resize:none;"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3" style="line-height:34px;"><span
                                    class="required">*</span>优惠券名称：</label>
                            <div class="col-md-8" style="text-align: left">
                                <select id="coupon_select" class="col-md-6 select2-offscreen" >

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success bt-save">保存</button>
                    </div>
                </div>
            </div>
        </div>


        <div class="container" id="container">
            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->

                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li>
                                        <i class="fa fa-home"></i>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a href="#">优惠券</a>
                                    </li>
                                    <li>补发优惠券</li>
                                </ul>
                                <!-- /BREADCRUMBS -->

                            </div>
                        </div>
                    </div>
                    <!-- /PAGE HEADER -->
                    <!-- FORMS QUERY-->

                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="box border primary">
                                        <div class="box-title">
                                            <h4><i class="fa fa-bars"></i>查询条件</h4>
                                        </div>
                                        <div class="box-body big" style="padding:10px;">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group mrg-bt10">
                                                    <label class="col-sm-1 control-label"
                                                           style="width: auto">优惠劵名称：</label>
                                                    <div class="col-sm-2">
                                                        <input type="text" class="form-control" name="q"
                                                               placeholder="输入关键字">
                                                    </div>

                                                    <label class="col-sm-1 control-label"
                                                           style="width: auto">手机号：</label>
                                                    <div class="col-sm-2">
                                                        <input type="text" class="form-control" name="mobile"
                                                               placeholder="输入关键字">
                                                    </div>


                                                    <label class="col-sm-1 control-label" style="width: auto">补发日期：</label>
                                                    <div class="col-sm-3" style="display:inline-flex">
                                                        <div class="col-sm-2" style="width:130px;padding-left:5px">
                                                            <input type="text" name="startDate"  class="form-control bootstrap-datepicker">
                                                        </div>
                                                        <div style="width: 20px">至</div>
                                                        <div class="float-left" style="width:100px">
                                                            <input type="text" name="endDate" class="form-control bootstrap-datepicker">
                                                        </div>
                                                    </div>


                                                    <div class="col-sm-1">
                                                        <a class="btn btn-primary search">查询</a>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /FORMS QUERY -->
                    <div class="row">
                        <!-- TABLES -->
                        <div class="row" style="height: 30px;margin-left: 5px">
                            <div class="col-md-12">
                                <div class="box ">
                                    <a href="#" class="btn btn-success addDistribueCouponBtn">
                                        <i class="fa  fa-plus-square-o"></i> 补发优惠劵
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <!-- BOX -->
                            <div class="box border primary">
                                <div class="box-title">
                                    <h4><i class="fa fa-table"></i>列表</h4>

                                </div>
                                <div class="box-body">
                                    <table id="db_coupon_detail_list" cellpadding="0" cellspacing="0" border="0"
                                           class="datatable table table-striped table-bordered table-hover">

                                    </table>
                                </div>
                            </div>
                            <!-- /BOX -->
                        </div>
                    </div>
                    <!-- /TABLES -->


                    <div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
                    </div>
                </div><!-- /CONTENT-->
            </div>
        </div>
    </div>
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>


<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>

<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>

<script type="text/javascript" src="../../js/datepicker/datepicker.js"></script>

<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>
<script src="../../js/common.js"></script>
<script>
    var CouponDetail = function () {
        var $mainDataTable = null;
        var searchCouponDetail = function () {
            var url = App.getContextPath() + "admin/coupon/searchCouponDetailByBatchId.do?q=" + $("[name=q]").val();
            var startDate = $("[name=startDate]").val();
            var endDate = $("[name=endDate]").val();
            var mobile = $("[name=mobile]").val();
            if(startDate != "") {
                url+="&startDate="+startDate;
            }
            if(endDate != "") {
                url+="&endDate="+$.dateAdd(endDate);
            }
            if(mobile != "") {
                url+="&mobile="+mobile;
            }

            if ($mainDataTable) {
                $mainDataTable.api().ajax.url(url).load();
                return;
            }
            var dtSetting = $.dataTableSetting({
                "ajaxSource": url,
                "serverSide": true,
                "bFilter": false,// 去掉搜索框
                "bLengthChange": true,// 每页显示数量
                "sScrollX": "100%",
                "sScrollXInner": "100%",
                "iDisplayLength": 25,

                "bSort": false,
                "aoColumns": [{
                    "mDataProp": "id",
                    "sTitle": "批次ID",
                    "width": "10%"
                }, {
                    "mDataProp": "coupon.couponTitle",
                    "sTitle": "优惠劵名称",
                    "width": "20%",
                    "render": function (data, type, row) {
                        return row.coupon.couponTitle;
                    }

                }, {
                    "sTitle": "手机号",
                    "mDataProp": "userName",
                    "width": "10%"
                }, {
                    "sTitle": "补发日期",
                    "mDataProp": "leadTime",
                    "width": "10%",
                    "render": function (data, type, row) {
                        return $.getLocalDate(row.leadTime);
                    }
                }, {
                    "sTitle": "补发原因",
                    "mDataProp": "remark",
                    "width": "10%"
                }, {
                    "sTitle": "补发人",
                    "mDataProp": "executor",
                    "width": "12%"
                }]
            });
            $mainDataTable = $("#db_coupon_detail_list").dataTable(dtSetting);
        };

        var couponList = function() {
            $.ajax({
                type: "get",
                url: App.getContextPath() + "admin/coupon/searchCouponByBatchIds.do",
                data: {pStatus:'Running', iDisplayStart:0, iDisplayLength:100},
                async: true,
                success: function (result) {
                    for (var i = 0; i < result.data.length; i++) {
                        $("#coupon_select").append("<option value='" + result.data[i].id + "'>" + result.data[i].couponTitle + "</option>");
                    }
                    $("#coupon_select").select2();
                }
            });
        }

        var distributeCoupon = function() {
            var couponBatchId = $("#coupon_select :selected").val();
            var remark = $("[name=remark]").val();
            var username = $("#username").val();
            if (remark=="") {
                $("input[name=remark]").parents(".form-group").addClass("has-error");
                return false;
            }
            if (username=="") {
                $("#username").parents(".form-group").addClass("has-error");
                return false;
            }
            $.blockUI();
            $.ajax({
                type: "post",
                url: App.getContextPath() + "admin/coupon/distributeCoupon.do",
                data: {couponBatchId: couponBatchId, remark: remark, username: username.trim().replace('，',',').replace('\r\n','')},
                async: false,
                success: function (result) {
                    $.unblockUI();
                    if(result.type == "error"){
                        alert(result.content);
                    }else {
                        $("#box-config").modal("hide");
                        $.clearInput();
                        searchCouponDetail();
                    }
                }
            });
        }

        return {
            init: function () {
                couponList();
                // searchCouponDetail();
                $(".search").click(searchCouponDetail);
                $(".addDistribueCouponBtn").click(function () {
                    $("#box-config").modal("show");
                    $(".bt-save").click(distributeCoupon);
                });
            }
        }
    }();

    $(function () {

        $("#header").load("../head.html");
        App.init(); //Initialise plugins and elements
        $.initDate($("#container"),0,0);

        CouponDetail.init();

    });


</script>
<!-- /JAVASCRIPTS -->
</body>
</html>